<template>
    <div class="container">
        <!-- 超级管理员页面模块 -->
        <div class="wrapper no-thead" v-if="isSuperAdmin">
            <el-row style="margin-left:20px;">
                <el-col :span="16">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">平台集群</h3>
                        <button @click="convertToPath('/monitoring/application/function')" class="chart-more">更多>></button>
                        <div class="chart">
                            <!--日志监控组件.start-->
                            <monitor :monitorObject="monitorObject" :memory_metrics="memory_metrics" :cpu_metrics="cpu_metrics">
                            </monitor>
                            <!--日志监控组件.end-->
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">平台计算节点 {{stats_last_time_node}}</h3>
                        <button @click="convertToPath('/monitoring/node/function')" class="chart-more">更多>></button>
                        <div class="chart">
                            <div id="chart-node" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                    <div class="grid-content bg-purple" style="margin-top:53px">
                        <h3 class="card-head-title">平台存储 {{stats_last_time_storage}}</h3>
                        <button @click="convertToPath('/apply/storage/management')" class="chart-more">更多>></button>
                        <div class="chart">
                            <div id="chart-storage" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row style="margin-left:20px;">
                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">平台团队 {{stats_last_time_team}}</h3>
                        <button @click="convertToPath('/team/function')" class="chart-more">更多>></button>
                        <div class="chart">
                            <div id="chart-team" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">平台空间 {{stats_last_time_namespace}}</h3>
                        <button @click="convertToPath('/team/function')" class="chart-more">更多>></button>
                        <div class="chart">
                            <div id="chart-ns" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">平台发布应用 {{stats_last_time_app}}</h3>
                        <button @click="convertToPath('/apply/management/app_page')" class="chart-more">更多>></button>
                        <div class="chart">
                            <div id="chart-app" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <el-row style="margin-left:20px;">
                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">平台镜像 {{stats_last_time_images}}</h3>
                        <button @click="convertToPath('/apply/mirror/manage')" class="chart-more">更多>></button>
                        <div class="chart">
                            <div id="chart-images" style="width:100%; height:332px;"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">平台组件健康 {{stats_last_time_health}}</h3>
                        <div class="tab-margin">
                            <el-table :data="healthData" style="width: 100%;height:320px">
                                <el-table-column label="" width="50">
                                    <template slot-scope="scope">
                                        <i style="color:#436EEE" class="el-icon-success" v-if="scope.row.status==1"></i>
                                        <i style="color:#FF0000" class="el-icon-error" v-if="scope.row.status==0"></i>
                                    </template>
                                </el-table-column>
                                <el-table-column :show-overflow-tooltip="true" prop="name" label="">
                                </el-table-column>
                                <el-table-column :formatter="statusFormat" prop="status" label="">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-col>

                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">平台告警{{alarmTitleInfo}}</h3>
                        <button @click="convertToPath('/task/warning/warning')" class="chart-more">更多>></button>
                        <div class="tab-margin">
                            <el-table empty-text="今天暂无系统告警" :data="alertData" style="width: 100%;height:320px">
                                <el-table-column label="" width="50">
                                    <template slot-scope="scope">
                                        <i class="el-icon-warning" style="color:#FFFF00"></i>
                                    </template>
                                </el-table-column>
                                <el-table-column :show-overflow-tooltip="true" prop="time" label="">
                                </el-table-column>
                                <el-table-column :show-overflow-tooltip="true" prop="alarmMsg" label="">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 普通人员页面模块 -->
        <div class="wrapper no-thead" v-if="!isSuperAdmin">
            <el-row style="margin-left:20px;">
                <el-col :span="16">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">当前空间性能</h3>
                        <button @click="convertToPath('/monitoring/application/function')" class="chart-more">更多>></button>
                        <div class="chart">
                            <!--日志监控组件.start-->
                            <monitor :monitorObject="monitorObject" :memory_metrics="memory_metrics" :cpu_metrics="cpu_metrics" :namespaceName="currentNs">
                            </monitor>
                            <!--日志监控组件.end-->
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple ">
                        <h3 class="card-head-title">当前空间发布应用 {{stats_last_time_ns_app}}</h3>
                        <button @click="convertToPath('/apply/management/app_page')" class="chart-more">更多>></button>
                        <div class="chart">
                            <div id="chart-ns-app" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                    <div class="grid-content bg-purple" style="margin-top:54px">
                        <h3 class="card-head-title">当前空间镜像仓库 {{stats_last_time_ns_images}}</h3>
                        <button @click="convertToPath('/apply/mirror/manage')" class="chart-more">更多>></button>
                        <div class="chart">
                            <div id="chart-ns-images" style="width:100%; height:180px;"></div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

    </div>
</template>
<script>
import echarts from 'echarts'
import monitor from '@/components/monitorCenter/monitor';
export default {
    components: { monitor },
    data() {
        return {
            //普通人员与超级管理员公有属性 start
            memory_metrics: 'memory/usage',
            cpu_metrics: 'cpu/usage_rate',
            //普通人员与超级管理员公有属性 end

            //超级管理员属性 start
            healthData: [],
            alertData: [],
            //超级管理员属性 end

            //普通人员属性 start
            chart_ns_app: null,
            chart_ns_images: null,
            //普通人员属性 end

            //统计截止时间参数
            stats_last_time_node:'',
            stats_last_time_storage:'',
            stats_last_time_team:'',
            stats_last_time_namespace:'',
            stats_last_time_app:'',
            stats_last_time_images:'',
            stats_last_time_health:'',

            stats_last_time_ns_app:'',
            stats_last_time_ns_images:'',

            //今天预警条数
            alarmTitleInfo:''
        }
    },
    methods: {
        //初始化饼图
        initPie(chartId, legendData, data) {
            let chart = echarts.init(document.getElementById(chartId), 'macarons');
            chart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: legendData
                },
                series: [{
                    type: 'pie',
                    radius: ['40', '60'],
                    center: ['65%', '35%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: data
                }]
            });
            return chart;
        },

        //更改chart
        updatePie(chart, legendData, data) {
            chart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: legendData
                },
                series: [{
                    type: 'pie',
                    radius: ['40', '60'],
                    center: ['65%', '35%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '14',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: data
                }]
            });
        },
        //普通人员首页饼图处理
        handlePie(type) {
            let url = this.projectConfig.URL_API_HOME;
            url += "?isSuperAdmin=" + this.isSuperAdmin + "&namespace=" + this.currentNs;
            this.httpClient.httpClientget(url).then((response) => {
                let data = response.data;
                this.stats_last_time_ns_app=data.namespaceAppStats.last_time;
                this.stats_last_time_ns_images=data.namespaceImagesStats.last_time;
                if (type == 'init') {
                    this.chart_ns_app = this.initPie("chart-ns-app", data.namespaceAppStats.legendData, data.namespaceAppStats.data);//空间应用
                    this.chart_ns_images = this.initPie("chart-ns-images", data.namespaceImagesStats.legendData, data.namespaceImagesStats.data);//空间应用
                } else {
                    this.updatePie(this.chart_ns_app, data.namespaceAppStats.legendData, data.namespaceAppStats.data);
                    this.updatePie(this.chart_ns_images, data.namespaceImagesStats.legendData, data.namespaceImagesStats.data);
                }
            });
        },


        //状态栏位格式化
        statusFormat: function(row, column, cellValue) {
            if (cellValue == '0') {
                return "异常";
            }
            if (cellValue == '1') {
                return "正常";
            }
            return "未知";
        },

        //功能跳转
        convertToPath:function(path){
            this.$router.push({
                path:path
            });
        }
    },
    mounted: function() {
        var _this = this;
        //基于准备好的dom，初始化echarts实例
        require('echarts/theme/macarons');
        let url = this.projectConfig.URL_API_HOME;
        url += "?isSuperAdmin=" + this.isSuperAdmin + "&namespace=" + this.currentNs;
        if (this.isSuperAdmin) {
            //超级管理员首页处理逻辑 start
            this.httpClient.httpClientget(url).then((response) => {
                let data = response.data;
                this.stats_last_time_node=data.nodeStats.last_time;
                this.stats_last_time_storage=data.storageStats.last_time;
                this.stats_last_time_team=data.teamStats.last_time;
                this.stats_last_time_namespace=data.namespaceStats.last_time;
                this.stats_last_time_app=data.appStats.last_time;
                this.stats_last_time_images=data.imagesStats.last_time;
                this.stats_last_time_health=data.healthStats.last_time;
                this.initPie("chart-node", data.nodeStats.legendData, data.nodeStats.data);//计算节点
                this.initPie("chart-storage", data.storageStats.legendData, data.storageStats.data);//存储
                this.initPie("chart-team", data.teamStats.legendData, data.teamStats.data);//团队
                this.initPie("chart-ns", data.namespaceStats.legendData, data.namespaceStats.data);//空间
                this.initPie("chart-app", data.appStats.legendData, data.appStats.data);//app
                this.initPie("chart-images", data.imagesStats.legendData, data.imagesStats.data);//images
                this.healthData = data.healthStats.data;
                this.alertData = data.alarmStats.data;
                if(this.alertData.length>0){
                    this.alarmTitleInfo='(今天告警数:'+data.alarmStats.num+')'    
                }else{
                    this.alarmTitleInfo='';    
                }
            });

        } else {
            //普通人员首页处理逻辑 start
            this.handlePie('init');
            //普通人员首页处理逻辑 end
        }


    },
    computed: {
        isSuperAdmin: function() {
            return this.userBaseInfo.getIsSuperAdmin();
        },
        monitorObject: function() {
            let isSuperAdmin = this.userBaseInfo.getIsSuperAdmin();
            if (isSuperAdmin) {
                return "cluster";
            } else {
                return "namespace";
            }
        },
        currentNs() {
            return this.$store.getters.namespace;
        }
    },
    watch: {
        currentNs(val) {
            if (!this.isSuperAdmin) {
                this.handlePie('update');
            }
        }
    }
}
</script>
<style scoped>
.container {
    .wrapper {
        margin: 10px auto;
        display: flex;
    }
    .el-row {
        width: 100%;
        margin-right: 20px;
    }
}

.tab-margin {
    margin: 12px 24px;
}

.chart {
    padding: 6px 20px;
    box-sizing: border-box;
}
</style>